{# SPDX-License-Identifier: Apache-2.0 -#}
{% extends "base.html" %}
{% block title %}
  {% if form.errors %}
    {% trans %}Error processing form{% endtrans %} -
  {% endif %}
  {% trans %}Log in{% endtrans %}
{% endblock %}
{% block content %}
  {% if testPyPI %}
    {% set title = "TestPyPI" %}
  {% else %}
    {% set title = "PyPI" %}
  {% endif %}
  <div class="horizontal-section">
    <div class="site-container">
      <h1 class="page-title">{% trans title=title %}Log in to {{ title }}{% endtrans %}</h1>
      <form method="post"
            action="{{ request.current_route_path() }}"
            id="login-form">
        <input name="csrf_token"
               type="hidden"
               value="{{ request.session.get_csrf_token() }}">
        {% if redirect.data %}<input name="{{ redirect.field }}" type="hidden" value="{{ redirect.data }}">{% endif %}
        {% if form.form_errors %}
          <ul class="form-errors" role="alert">
            {% for error in form.form_errors %}<li>{{ error }}</li>{% endfor %}
          </ul>
        {% endif %}
        <div class="form-group">
          <label for="username" class="form-group__label">
            {% trans %}Username{% endtrans %}
            {% if form.username.flags.required %}
              <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
            {% endif %}
          </label>
          {{ form.username(placeholder=gettext("Your username") ,
          autocapitalize="off",
          autocomplete="username",
          spellcheck="false",
          required="required",
          class_="form-group__field",
          aria_describedby="username-errors",
          tabindex="1",
          ) }}
          <div id="username-errors">
            {% if form.username.errors %}
              <ul class="form-errors" role="alert">
                {% for error in form.username.errors %}<li>{{ error }}</li>{% endfor %}
              </ul>
            {% endif %}
          </div>
        </div>
        <div data-controller="password" class="form-group">
          <div class="split-layout">
            <label for="password" class="form-group__label">
              {% trans %}Password{% endtrans %}
              {% if form.password.flags.required %}
                <span class="form-group__required">{% trans %}(required){% endtrans %}</span>
              {% endif %}
            </label>
            <label for="show-password">
              <input data-action="change->password#togglePasswords"
                     data-password-target="showPassword"
                     id="show-password"
                     type="checkbox"
                     tabindex="3">
              &nbsp;{% trans %}Show password{% endtrans %}
            </label>
          </div>
          {{ form.password(placeholder=gettext("Your password") ,
          required="required",
          class_="form-group__field",
          autocomplete="current-password",
          spellcheck="false", data_password_target="password",
          aria_describedby="password-errors",
          tabindex="2",
          ) }}
          <div id="password-errors">
            {% if form.password.errors %}
              <ul class="form-errors" role="alert">
                {% for error in form.password.errors %}<li>{{ error }}</li>{% endfor %}
              </ul>
            {% endif %}
          </div>
          <div class="form-group">
            <div class="split-layout margin-top--large margin-bottom--large">
              <div>
                <input type="submit"
                       value="{% trans %}Log in{% endtrans %}"
                       class="button button--primary"
                       tabindex="4">
              </div>
              <span>
                <a href="{{ request.route_url('accounts.request-password-reset') }}">{% trans %}Forgot password?{% endtrans %}</a>
              </span>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
{% endblock %}
